// txsp/static/JavaScript.js

// 初始化选项卡点击事件
function initNavLinks() {
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            navLinks.forEach(item => item.classList.remove('active'));
            link.classList.add('active');

            const target = link.dataset.target;
            loadPage(target);
        });
    });
}

// 加载页面
function loadPage(page) {
    $.ajax({
        url: page,
        method: 'GET',
        success: function(response) {
            // 创建一个临时的 DOM 元素来解析响应内容
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = response;

            // 移除所有脚本标签
            const scripts = tempDiv.getElementsByTagName('script');
            while (scripts.length > 0) {
                scripts[0].parentNode.removeChild(scripts[0]);
            }

            // 找到内容容器（排除导航栏）
            const content = tempDiv.querySelector('#content-container');
            if (content) {
                $('#content-container').html(content.innerHTML);
            } else {
                $('#content-container').html(tempDiv.innerHTML);
            }

            if (page === '/') {
                const defaultYear = '2025';
                loadPieChart(defaultYear);
                loadTop10HotBar(defaultYear);
                loadRatingTop20Bar(defaultYear);
                loadScatterChart(defaultYear);

                // 年份筛选下拉菜单的变化事件
                $('#year-filter').change(function() {
                    const selectedYear = $(this).val();
                    loadPieChart(selectedYear);
                    loadTop10HotBar(selectedYear);
                    loadRatingTop20Bar(selectedYear);
                    loadScatterChart(selectedYear);
                });
            } else if (page === '/new.html') {
                // 重新初始化轮播图
                initSlider();
            }
        },
        error: function(error) {
            console.error('Error loading page:', error);
            $('#content-container').html('加载页面出错');
            console.log('Status:', error.status);
            console.log('Status Text:', error.statusText);
            console.log('Response Text:', error.responseText);
        }
    });
}

// 初始化轮播图
function initSlider() {
    // 获取滑块容器和轮播项数量
    const sliderNew = document.getElementById('slider-new');
    const slides = sliderNew.getElementsByTagName('img');
    let currentIndex = 0;

    // 切换到上一张幻灯片
    function prevSlide() {
        currentIndex = (currentIndex - 1 + slides.length) % slides.length;
        updateSlider();
    }

    // 切换到下一张幻灯片
    function nextSlide() {
        currentIndex = (currentIndex + 1) % slides.length;
        updateSlider();
    }

    // 更新滑块位置
    function updateSlider() {
        const slideWidth = slides[0].offsetWidth;
        sliderNew.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
    }

    // 绑定按钮事件
    const prevBtn = document.querySelector('.slider-btn.prev');
    const nextBtn = document.querySelector('.slider-btn.next');
    if (prevBtn) {
        prevBtn.addEventListener('click', prevSlide);
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', nextSlide);
    }

    // 添加自动轮播功能
    let intervalId = setInterval(nextSlide, 3000); // 每隔3秒切换一次

    // 当鼠标悬停在轮播图上时，停止自动轮播
    sliderNew.addEventListener('mouseenter', () => {
        clearInterval(intervalId);
    });

    // 当鼠标离开轮播图时，继续自动轮播
    sliderNew.addEventListener('mouseleave', () => {
        intervalId = setInterval(nextSlide, 3000);
    });
}

// 加载饼图
function loadPieChart(year) {
    $.ajax({
        url: `/pie_chart/${year}`,
        method: 'GET',
        success: function(response) {
            $('#pie-chart-container').html(response);
        },
        error: function(error) {
            console.error('Error loading pie chart:', error);
            $('#pie-chart-container').html('无该年份数据');
            console.log('Status:', error.status);
            console.log('Status Text:', error.statusText);
            console.log('Response Text:', error.responseText);
        }
    });
}

// 加载热度Top10水平条形图
function loadTop10HotBar(year) {
    $.ajax({
        url: `/top10_hot_bar/${year}`,
        method: 'GET',
        success: function(response) {
            $('#top10-hot-bar-container').html(response);
        },
        error: function(error) {
            console.error('Error loading top10 hot bar chart:', error);
            $('#top10-hot-bar-container').html('无该年份数据');
            console.log('Status:', error.status);
            console.log('Status Text:', error.statusText);
            console.log('Response Text:', error.responseText);
        }
    });
}

// 加载评分排名条形图
function loadRatingTop20Bar(year) {
    $.ajax({
        url: `/rating_top20_bar/${year}`,
        method: 'GET',
        success: function(response) {
            $('#rating-top20-bar-container').html(response);
        },
        error: function(error) {
            console.error('Error loading rating top20 bar chart:', error);
            $('#rating-top20-bar-container').html('无该年份数据');
            console.log('Status:', error.status);
            console.log('Status Text:', error.statusText);
            console.log('Response Text:', error.responseText);
        }
    });
}

// 加载热度-评分-评论数气泡图
function loadScatterChart(year) {
    $.ajax({
        url: `/scatter_chart/${year}`,
        method: 'GET',
        success: function (response) {
            $('#scatter-chart-container').html(response);
        },
        error: function (error) {
            console.error('Error loading scatter chart:', error);
            $('#scatter-chart-container').html('无该年份数据');
            console.log('Status:', error.status);
            console.log('Status Text:', error.statusText);
            console.log('Response Text:', error.responseText);
        }
    });
}

$(document).ready(function() {
    initNavLinks();

    // 初始化加载当前年份（2025）的图表
    const defaultYear = '2025';
    loadPieChart(defaultYear);
    loadTop10HotBar(defaultYear);
    loadRatingTop20Bar(defaultYear);
    loadScatterChart(defaultYear);

    // 年份筛选下拉菜单的变化事件
    $('#year-filter').change(function() {
        const selectedYear = $(this).val();
        loadPieChart(selectedYear);
        loadTop10HotBar(selectedYear);
        loadRatingTop20Bar(selectedYear);
        loadScatterChart(selectedYear);
    });

    // 监听导航栏链接的点击事件
    $('.nav-link').click(function(e) {
        e.preventDefault(); // 阻止默认的跳转行为
        var target = $(this).data('target'); // 获取目标页面的文件名

        // 移除所有链接的 active 类
        $('.nav-link').removeClass('active');
        // 给当前点击的链接添加 active 类
        $(this).addClass('active');

        // 使用 AJAX 请求加载目标页面的内容
        $.ajax({
            url: target,
            method: 'GET',
            success: function(response) {
                // 创建一个临时的 DOM 元素来解析响应内容
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = response;

                // 找到内容容器（排除导航栏）
                const content = tempDiv.querySelector('#content-container');
                if (content) {
                    $('#content-container').html(content.innerHTML);
                } else {
                    $('#content-container').html(response);
                }

                if (target === '/') {
                    const defaultYear = '2025';
                    loadPieChart(defaultYear);
                    loadTop10HotBar(defaultYear);
                    loadRatingTop20Bar(defaultYear);
                    loadScatterChart(defaultYear);

                    // 年份筛选下拉菜单的变化事件
                    $('#year-filter').change(function() {
                        const selectedYear = $(this).val();
                        loadPieChart(selectedYear);
                        loadTop10HotBar(selectedYear);
                        loadRatingTop20Bar(selectedYear);
                        loadScatterChart(selectedYear);
                    });
                } else if (target === '/new.html') {
                    // 重新初始化轮播图
                    initSlider();
                }
            },
            error: function() {
                alert('Failed to load the page.'); // 处理加载失败的情况
            }
        });
    });
});